<template>
	<div id="app">
		<div class="container">
			<!-- 顶部框模块 -->
			<div class="form-group">
				<div class="input-group">
					<h4>品牌管理</h4>
				</div>
			</div>

			<!-- 数据表格 -->
			<table class="table table-bordered table-hover mt-2">
				<thead>
					<tr>
						<th>编号</th>
						<th>资产名称</th>
						<th>价格</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in list" :key="item.id">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<!-- <td :class="{red:item.price > 100}">{{item.price}}</td> -->
						<td :style="{color:item.price > 100 ? 'red' : ''}">{{item.price}}</td>
						<td>{{item.time}}</td>
						<td><a href="#" @click="delFn(item.id)">删除</a></td>
					</tr>

					<!-- 不用循环，展示总价 和 平均价 -->
					<tr style="background-color: #EEE" v-show="list.length !== 0">
						<td>统计:</td>
						<td colspan="2">总价钱为: </td>
						<td colspan="2">平均价: </td>
					</tr>
				</tbody>
				<!-- 底部的提示消息 -->
				
					<tfoot v-show="list.length === 0">
					  <tr>
						<td colspan="5" style="text-align: center">暂无数据</td>
					  </tr>
					</tfoot>
				
			</table>

			<!-- 添加资产 -->
			<form class="form-inline">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="资产名称"  v-model="name"/>
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="价格" v-model="price"/>
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<!-- 阻止表单提交 -->
				<button class="btn btn-primary" @click.prevent="addFn">添加资产</button>
			</form>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				name:'',
				price:'',
				list:[
					{
						id:100,
						name:'外套',
						price:199,
						time: new Date('2010-08-12')
					},{
						id:101,
						name:'裤子',
						price:34,
						time: new Date('2012-08-13')
					},
					{
						id:102,
						name:'鞋',
						price:25.4,
						time: new Date('2012-09-13')
					},
					{
						id:103,
						name:'头发',
						price:199,
						time: new Date('2012-08-19')
					},
				]
			}
		},
		methods:{
			delFn(id){
			this.list =	this.list.filter(item =>item.id != id)
			},
			addFn(){
				if(this.name.trim().length === 0 || this.price === 0){
					return alert('输入内容')
				}
				this.list.push({
					id:+new Date(),
					name:this.name,
					price:this.price,
					time:new Date()
				})
			}
		}
			
	};
</script>

<style>
	.red {
		color: red;
	}
</style>
